<!-- 购物车 -->
<template>
  <div class="cart">
    <van-nav-bar fixed title="购物车" safe-area-inset-top @click-left="() => $router.push({ path: '/' })">
      <template #left>
        <img style="width: 30px" src="../../assets/images/返回首页.png" alt="" />
      </template>
    </van-nav-bar>
    <!--  -->
    <div class="totip">共{{ num }}件商品</div>
    <div class="content">
      <!-- 循环体 -->
      <div class="item" v-for="(item, index) in list" :key="index">
        <!-- <div class="top">
          <img src="../../assets/images/mall/店铺头像.png" alt="" />
          <span>扬州什么公司</span>
          <van-icon name="arrow" />
        </div> -->
        <div class="center">
          <div class="img">
            <img :src="item.imgurl" alt="" />
          </div>
          <div class="name">
            <div>{{item.goods_name}}</div>
            <div>规格：{{item.goods_attr}}</div>
            <div>
              <span>￥{{item.goods_price}}</span>
              <div class="num">
                <van-icon size="0.6rem" color="red" name="delete-o" @click="del(item)" />
                <van-stepper v-model="item.num" min="0" @change="onChange(item)" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作栏 -->
      <div class="caozuo">
        <div class="price">总价：<span>￥ {{order_total_price}}</span> </div>
        <div>
          <van-button color="rgb(92,155,246)" @click="jiesuan()" type="info" size="mini"
            style="width: 2rem; border-radius: 10px">去结算
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from '../../utils/bus.js'
import { cartList, cartEdit, cartDel } from "../../api/cart";
export default {
  name: "",
  data() {
    return {
      list: [],
      num: 0,
      order_total_price: 0,
    };
  },
  methods: {

    async getData() {
      let res = await cartList({ userid: localStorage.getItem("userid") });
      if (res.status == 200) {
        this.list = res.data.list;
        this.order_total_price = res.data.order_total_price;
      }
    },
    async onChange(uitem) {

      if (uitem.num == 0) {
        this.del(uitem);
        return;
      }
      uitem.userid = localStorage.getItem("userid");
      let res = await cartEdit(uitem);
      console.log("res", res);
    },
    async del(uitem) {
      uitem.userid = localStorage.getItem("userid");
      let res = await cartDel(uitem);
      if (res.status == 200) {
        this.getData();
      }
    },
    jiesuan() {

      if (this.list.length == 0) {
        this.$toast("您的购物车还没有商品");
        return;
      }
      this.$router.push({ path: "/submit-order", query: {} });
    }
  },
  computed: {},
  watch: {},
  created() {

    this.getData();
  },
  mounted() {

    Bus.$on('cart', (data) => {


      this.getData();

    })
  },
};
</script>

<style lang="scss" scoped>
.cart {
  width: 100%;
  padding-top: 92px;

  .totip {
    padding: 20px 30px;
    font-size: 28px;
  }

  .content {
    width: 92%;
    margin: 0 auto 20px;
    border-radius: 25px;
    background-color: #fff;

    .item {
      padding: 20px;

      .top {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        font-size: 28px;
        color: rgb(153, 153, 153);

        img {
          width: 50px;
          height: 50px;
          margin-right: 10px;
        }
      }

      .center {
        display: flex;

        .name {
          flex: 1;
          margin-left: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-size: 28px;

          > :first-child {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            /*将对象作为弹性伸缩盒子模型显示*/
            -webkit-line-clamp: 2;
            /*限制文本的行数，只显示2行*/
            -webkit-box-orient: vertical;
          }

          > :nth-child(2) {
            color: rgb(153, 153, 153);
          }

          > :last-child {
            display: flex;
            justify-content: space-between;
            align-items: center;

            > :first-child {
              color: #3e96e8;
            }

            .num {
              width: 58%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
          }
        }

        .img img {
          width: 200px;
          height: 200px;
        }
      }
    }

    .caozuo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;

      .price {
        font-size: 30px;

        span {
          color: #3e96e8;
        }
      }
    }
  }
}
</style>